<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/templates/common/taglib.jsp"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>${title }</title>
    <link rel="stylesheet" href="${basePath}/static/bootstrap/css/bootstrap.css"/>
    <link href="${basePath}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${basePath}/static/css/login.css" rel="stylesheet" type="text/css">
    <link href="${basePath}/static/css/list.css" rel="stylesheet" type="text/css">
    <script  type="text/javascript" src="${basePath}/static/js/jquery.min.js"></script>
	<script  type="text/javascript" src="${basePath}/static/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${basePath}/static/page/jqPaginator/jqPaginator.js"></script>
    <script  type="text/javascript" src="${basePath}/static/layer/layer.js"></script>
    <link href="${basePath}/static/layer/layer_defined.css" rel="stylesheet" type="text/css">
    
    <style>
	.overlay{height:600px;width:100%;position:absolute;top:0px;left:0px;background-color:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
	.win{position:absolute;top:10%;left:50%;margin-left:-30%;width:600px;background:#fff;display:none;}
	h2{text-align:right;padding-right: 5px;margin-top: -3px;}
	h2 span{color:#000000;font-size:25;color:#000000;cursor:pointer;}
    </style>
</head>
<body>
<!--头部-->
	<%@include file="/WEB-INF/templates/common/header.jsp"%>
	<!------导航条-->
	<%@include file="/WEB-INF/templates/common/navigation.jsp"%>

<!--内容部分-->
<div class="list_main lay_out" class="clearfix">
    <div class="list_DH">
        <%@include file="/WEB-INF/templates/common/inhospitalDisease.jsp"%>
    </div>
    <div class="list_NR" style="position: relative;">
         <div id="overlay" class="overlay"></div>
		 <div id="win" class="win">
		  <h2><span id="close" onclick="closeChart()">×</span></h2>
		  <div id="chartmain" style="width:600px; height:500px; padding-bottom: 20px;"></div>
        	
		 </div>
        <div class="loc">
            <h3 style="margin:0" >诊治疾病顺位</h3>
        </div>
        <div class="list_con_table">
            <div class="search_table">
                <ul class="clearfix" style="margin-bottom:0;">
                    <li class="Label_1" style="width:12%;">出院日期：&nbsp;</li>
                    <li class="Label_4" style="text-align:left;padding-left:3px;width:32%">
                    	<input class="Wdate input" style="width:44%;" type="text"  name='startTime' id='outHospitalStartDate' value='' onFocus="WdatePicker()" />
                    	<span>&nbsp;-&nbsp;</span>
                    	<input class="Wdate input" type="text" style="width:44%;"  name='endTime' id='outHospitalEndDate' value='' onFocus="WdatePicker()" />
                    </li>
				    <li class="Label_1"  style="width:12%;">出院科室：&nbsp;</li>
				    <li class="Label_2" style="width:15%">
					    <select class="input_box" name='outDeptName' id='outDeptName'/>

					    <option value="">请选择</option>
					     <c:if test="${not empty officeList}">
					     	<c:forEach items="${officeList }" var="office">
					     		<option value="${office.name }">${office.name }</option>
					     	</c:forEach>
					     </c:if>
					    </select>
				    </li>
					<li class="Label_1"  style="width:12%;">诊断类型：&nbsp;</li>
				    <li class="Label_2" style="width:15%">
				    <select class="input_box"  name='mainDiagnose' id='mainDiagnose'>
				      <option value="1" selected>主要诊断</option>	
				      <option value="2">次要诊断</option>	
				    </select>
				    </li>
				    
				   <li class="Label_5">
                        <div class="right" style="text-align:right">
                            <a onclick="tj()">统计</a>
                        </div>
                        <div class="right" style="text-align:right">
                            <a onclick="exportExcle()">导出</a>
                        </div>
                    </li>
                </ul>
            </div> 
            <table class="Search_tableList" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan='4' style="text-align:center;"><button onclick="showChart()" style="padding:0 8px;margin-bottom:10px;">构成图</button></td>
                </tr>
                <tr>
                    <td class="tdLabel_4">编码</td> 
                    <td class="tdLabel_4">疾病名称</td>
                    <td class="tdLabel_4">数量</td>
                    <td class="tdLabel_4">构成比</td>
                </tr>
                <tbody id="tbody">
	                 <!-- <tr>
	                    <td class="tdLabel_5"></td>
	                    <td class="tdLabel_5"></td>
	                    <td class="tdLabel_5"></td>
	                    <td class="tdLabel_5"></td>
	                </tr> -->
                </tbody>
            </table>
            <!-- <div id="chartmain" style="width:100%; height:520px; padding-bottom: 90px;"></div>
         -->
        </div>
    </div>
</div>
<!------页脚部分--------->
<%@include file="/WEB-INF/templates/common/footer.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echatrs/echarts.min.js"></script>

<!--JS部分-->
<script type="text/javascript">
   //图表的参数，从后台获取数据；
	var legendData = [];
	var seriesData = [];
	//构成图按钮事件
	function showChart(){
		var option = getOption(legendData, seriesData);
			 //初始化echarts实例
	    var myChart = echarts.init(document.getElementById('chartmain'));
		    //使用制定的配置项和数据显示图表
		myChart.setOption(option);
		//如果右侧查询数据的高度超过600px,就给遮罩层重新设置高度；    
		if($(".list_NR").height()>600){
			$("#win").height($(".list_NR").height());
		}    
		$("#win").show();
		$("#overlay").show();
	}
	//关闭构成图
	function closeChart(){
		$("#win").hide();
		$("#overlay").hide();
	}
	
	
	function exportExcle() {
		var outHospitalStartDate=$("#outHospitalStartDate").val();
    	var outHospitalEndDate=$("#outHospitalEndDate").val();
    	var outDeptName=$("#outDeptName").val();
    	var mainDiagnose=$("#mainDiagnose").val();
    	var url= '';
    	if (mainDiagnose == 1) {
    		
    		url = "${basePath}/exportExcel/exportDiagnoseDisease?beginOutHospitalDate="+outHospitalStartDate+"&endOutHospitalDate="+outHospitalEndDate+"&outDeptName="+outDeptName;
    		location = url;
    	} else if (mainDiagnose == 2) {
    		url = "${basePath}/exportExcel/exportSecondDiagnoseDisease?beginOutHospitalDate="+outHospitalStartDate+"&endOutHospitalDate="+outHospitalEndDate+"&outDeptName="+outDeptName;
    		location = url;
    	}
    	
	}
	
    function tj(){
    	legendData=[];
    	seriesData = [];
    	var outHospitalStartDate=$("#outHospitalStartDate").val();
    	var outHospitalEndDate=$("#outHospitalEndDate").val();
    	var outDeptName=$("#outDeptName").val();
    	var mainDiagnose=$("#mainDiagnose").val();
    	var url='${corePath}/statistics/ajax_getMainDiagnoseDiseaseTop12';//默认主要诊断
    	if(mainDiagnose==2){//次要诊断
    	  	url="${corePath}/statistics/ajax_getSecondDiagnoseDiseaseTop12";
    	}
    	jQuery.support.cors = true;
    	$.ajax({
    		type:"post",
    		url:url,
    		data:{beginOutHospitalDate:outHospitalStartDate,
    			 endOutHospitalDate:outHospitalEndDate,
    			 outDeptName:outDeptName},
    		success:function (data){
    			//console.log(data)
    		    if(data.success){
    		    	var dataresult=data.data;
    		    	var datahtml="";
    		    	if(dataresult.length<=0){
    		    		layer.alert("查询的数据为空！",{icon:5});
    		    		return;
    		    	}
    		    	for(var i=0;i<dataresult.length;i++){
    		    		if(i<10){
    		    			legendData.push(dataresult[i].disease_name+dataresult[i].total);
        		    		seriesData.push({value:dataresult[i].total,name:dataresult[i].disease_name+dataresult[i].total});
        		    		
        		    	}
    		    		
    		    		datahtml+='<tr><td class="tdLabel_5">'+(dataresult[i].disease_code=="null"?"":dataresult[i].disease_code)+'</td>'+
    		    				  '<td class="tdLabel_5">'+(dataresult[i].disease_name?dataresult[i].disease_name:"")+'</td>'+
    		    				  '<td class="tdLabel_5">'+(dataresult[i].total?dataresult[i].total:"")+'</td>'+
    		    				  '<td class="tdLabel_5">'+(dataresult[i].diseasePercent?dataresult[i].diseasePercent:"")+'</td>'+
    		        		      '</tr>';
    		    	}
    		    	$("#tbody").html(datahtml);
        			 
    			}else{
    				layer.alert(data.msg,{icon:5});
    			}
    		},
    		error:function(error){
    			layer.alert('服务器错误',{icon:5});
    		}
    			 
    	})
    }
	
    function getOption(legendData, seriesData) {
		option = {
			    title : {
			        text: '疾病顺位',
			        x:'center',
                   
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a}: <br/>{b}({d}%)"
			    },
			    legend: {
			    	orical:'horizontal',
			    	top:"10%",
			    	//bottom:'bottom',
			       // orient: 'vertical',
			       // left: 'left',
			        textStyle:{fontSize:14},
			        data: legendData
			        	/* ['食管恶性肿瘤', '肝和肝内胆恶性肿瘤', '心绞痛', '胃恶性肿瘤',
			        	   	'乳房恶性肿瘤', '脑梗死', '非胰岛素依赖型糖尿病', '支气管和肺恶性肿瘤',
			        	   	'血管瘤和肺恶性肿瘤,任何部位', '直肠恶性肿瘤', '其他'] */
			    },
			    series : [
			        {
			            name: '疾病顺位',
			            type: 'pie',
			            radius : '70%',
			            center: ['50%', '60%'],
			            data:seriesData,
			            /* [
			                {value:192, name:'食管恶性肿瘤'},
			                {value:270, name:'肝和肝内胆恶性肿瘤'},
			                {value:292, name:'心绞痛'},
			                {value:312, name:'胃恶性肿瘤'},
			                
			                {value:440, name:'乳房恶性肿瘤'},
			                {value:165, name:'脑梗死'},
			                {value:220, name:'非胰岛素依赖型糖尿病'},
			                {value:807, name:'支气管和肺恶性肿瘤'},
			                {value:189, name:'血管瘤和肺恶性肿瘤,任何部位'},
			                {value:250, name:'直肠恶性肿瘤'},
			                {value:10355, name:'其他'}
			            ], */
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            },
			             label:{
			            	normal:{
                                 textStyle:{
				            		 fontSize:14
				            	 },
			            		/* formatter:function(param){
			            			return param.name+"："+param.value;
			            		} */
			            	}
			            }
			        }
			    ]
			};	
			return option;
	}
</script>


</body>
</html>